<script>
import { getLogisticsDetails } from '@/api/shop/logistics_details'

export default {
  data() {
    return {
      logisticsId: null,
      logisticsDetails: {},
      tripartiteLogistics:{
        logisticsStatusDesc:'状态信息',
        theLastMessage:'物流信息',
        cpMobile:'快递公司电话',
        logisticsTraceDetailList:[]
      },
    }
  },
  methods: {
    getLogisticsDetails() {
      getLogisticsDetails(this.logisticsId).then(response => {
        if (response.code === 200) {
          console.log(response)
          console.log(response.data)
          this.logisticsDetails = response.data
          if (response.data.tripartiteLogisticsData!=null){
            this.tripartiteLogistics = response.data.tripartiteLogisticsData
          }
        }

      })
    }
  },
  created() {
    if (this.$route.query.id != undefined) {
      console.log(this.$route.query.id)
      this.logisticsId = this.$route.query.id
      this.getLogisticsDetails()
    }
  }
}
</script>

<template>
  <div class="app-container">
    <el-form :model="logisticsDetails" size="medium" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="快递单号" prop="logisticsId">
            <el-input v-model="logisticsDetails.logisticsId" placeholder="快递单号"
                      readonly :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="logisticsDetails.phone" placeholder="手机号"
                      readonly :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户名" prop="nickname">
            <el-input v-model="logisticsDetails.nickname" placeholder="用户名"
                      readonly :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="会员信息" prop="membershipLevel">
            <el-input v-model="logisticsDetails.membershipLevel" placeholder="会员信息"
                      readonly :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人信息" prop="handler">
            <el-input v-model="logisticsDetails.handler" placeholder="负责人信息"
                      readonly :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>


        <el-col :span="6">
          <el-form-item label="状态信息" prop="status">
            <el-input v-model="tripartiteLogistics.logisticsStatusDesc" placeholder="状态信息"
                      readonly :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="快递公司电话" prop="cpMobile">
            <el-input v-model="tripartiteLogistics.cpMobile" placeholder="快递公司电话"
                      readonly :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="物流描述" prop="description">
            <el-input v-model="tripartiteLogistics.theLastMessage" placeholder="物流描述"
                      readonly :style="{width: '100%'}"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>
    <div class="timeline-container">
    <el-timeline
      :reverse="true">
      <el-timeline-item
        type="primary "
        size="large"
        v-for="(item, index) in tripartiteLogistics.logisticsTraceDetailList"
        :key="index"
        :timestamp="item.timeDesc">
        {{item.desc}}
      </el-timeline-item>
    </el-timeline>
    </div>
  </div>
</template>

<style scoped lang="scss">
.timeline-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.timeline-container .el-timeline {
  transform-origin: top center; /* 设置缩放的基点为中心顶部 */
}
</style>
